<template>
  <div v-if="comments.length">
    <div style="text-align:left;font-weight:bold;margin-bottom:1em;">评论列表：</div>
    <CommentItem v-for="c in comments" :key="c.id" :comment="c" :showBtn="showBtn"></CommentItem>
    <el-pagination
      style="margin-top: 1em"
      background
      layout="prev, pager, next"
      :current-page="page"
      :page-size="pageSize"
      :total="total"
      @current-change="handleCurrentChange"
      class="my-pagination"
    ></el-pagination>
  </div>
  <!-- <el-empty description="欢迎留言" v-else></el-empty> -->
</template>

<script>
import CommentItem from './Comment.vue'
export default {
  components: { CommentItem },
  props: {
    comments: { type: Array },
    total: { type: Number },
    page: { type: Number },
    pageSize: { type: Number },
    handleCurrentChange: { type: Function },
    showBtn: { type: Boolean, default: true }
  }
}
</script>

<style>
.my-comment {
  margin-top: 0.5em;
}
</style>